<template>
  <div class="i_bg bg_color">
    <div class="i_ban_bg">
      <!--Begin Banner Begin-->
      <div class="banner">
        <div class="top_slide_wrap" @mouseenter="stopAutoPlay()" @mouseleave="startAutoPlay()">
          <ul class="slide_box bxslider">
            <li v-for="(image, index) in images" :key="index" v-show="imageIndex === index">
              <img :src="image" width="740" height="401" />
            </li>>
          </ul>
          <div class="op_btns clearfix">
            <a href="#" @click.prevent="changePic('last')" class="op_btn op_prev"><span></span></a>
            <a href="#" @click.prevent="changePic('next')" class="op_btn op_next"><span></span></a>
          </div>
        </div>
      </div>

      <!--End Banner End-->
      <inews-view></inews-view>
    </div>
    <!-- 热门 begin -->
    <top-products-vue></top-products-vue>
    <!-- 热门 end -->
    <!-- 楼层商品 begin -->
    <floor-products-vue></floor-products-vue>
    <!-- 楼层商品 end -->

  </div>
</template>

<script>
import TopProductsVue from '@/components/TopProducts.vue';
import FloorProductsVue from '@/components/FloorProducts.vue';
import InewsView from '@/components/InewsView.vue';
import { mapMutations } from 'vuex'

//添加注示
export default {
  name: "IndexView",

  components: {

    TopProductsVue,
    FloorProductsVue,
    InewsView
  },
  data() {
    return {
      images: [
        require('@/assets/images/ban1.jpg'),
        require('@/assets/images/ban2.jpg'),
        require('@/assets/images/ban3.jpg')
      ],
      imageIndex: 0,
      intervalId: null
    }
  },
  methods: {
    ...mapMutations(['setShowPage']),
    changePic(opr) {

      if (opr == 'next') {
        if (this.imageIndex == this.images.length - 1) {
          this.imageIndex = 0
        } else {
          this.imageIndex += 1
        }
      } else {
        if (this.imageIndex == 0) {
          this.imageIndex = this.images.length - 1
        } else {
          this.imageIndex -= 1
        }
      }
    },
    startAutoPlay() {
      this.intervalId = setInterval(() => {
        this.changePic('next');
      }, 1000);
    },
    stopAutoPlay() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    }
  },
  mounted() {
    this.setShowPage(0)
    this.startAutoPlay()
  }
};
</script>

<style></style>